import * as types from '../types'
import {
	getNewPageId,
	getNewPage
} from '../functions'
import {
	deepClone
} from '@/utils'

const state = {
	lists: [],
	curPageId: null,
	newTemPageId: null,
	revoke_state: false
}

const getters = {
	pages: (state) => state.lists,
	curPageId: (state) => state.curPageId || state.lists[0]['id'],
	curPage: (state) => {
		return state.lists
			.find(
				(itm) => itm.id === state.curPageId
			) || state.lists[0]
	},
	getPageConfigByPageId: (state) => (pageId) => {
		return state.lists.find((cp) => cp.id === pageId)
	},
	getCompByPageId: (state) => () => {
		const curPage = state.lists.find((page) => page.id === state.curPageId)
		return curPage
	},
	newTemPageId: (state) => state.newTemPageId,
	revoke_state: (state) => state.revoke_state
}

const actions = {
	addNewPage({
		commit
	}) {
		const page = getNewPage()
		if (page) {
			commit('ADD_PAGE', page)
		}
		return page.id
	},
	insertPage({
		commit
	}, prePageId) {
		const page = getNewPage()
		if (page) {
			commit('INSERT_PAGE', {
				page,
				pageId: prePageId
			})
		}
		return page.id
	},
	copyPage({
		commit
	}, pageId) {
		const id = getNewPageId()
		if (id) {
			commit('COPY_PAGE', {
				prePageId: pageId,
				pageId: id
			})
			// 关闭设置面板
			commit('CLOSE_PROPS_PANEL')
		}
		return id
	},
	removePage({
		commit
	}, pageId) {
		commit('REMOVE_PAGE', pageId)
		return pageId
	},
	openEditPage({
		commit
	}, pageId) {
		commit('OPEN_PROPS_PANEL', {
			name: 'PagePropConfig',
			id: pageId
		})
	},
	setPageBackImg({
		commit,
		state
	}, imgSrc) {
		commit('SET_PAGE_BGIMAGE', imgSrc)
	}

}

const mutations = {
	[types.TOGGLE_PAGE](state, pageId) {
		state.curPageId = pageId
	},
	[types.ADD_PAGE](state, pageData) {
		if (!pageData) {
			pageData = getNewPage()
		}
		state.lists.push(pageData)
		state.newTemPageId = pageData.id
	},
	[types.INSERT_PAGE](state, {
		page,
		pageId
	}) {
		const index = state.lists.findIndex((page) => page.id === pageId)
		if (index > -1) {
			state.lists.splice(index + 1, 0, page)
			state.curPageId = page.id
		}
	},
	[types.COPY_PAGE](state, {
		prePageId,
		pageId
	}) {
		const lists = state.lists
		const index = lists.findIndex((page) => page.id === prePageId)
		if (index > -1) {
			// let pageData = deepClone(lists[index])
			let pageData = JSON.parse(JSON.stringify(lists[index]))
			for (let comp of pageData.comps) {
				comp.parentId = pageId
			}
			pageData.id = pageId
			// 复制的数据，将撤销和恢复的状态调整为初始值
			pageData.revoke = []
			pageData.recovery = []
			// lists.splice(index + 1, 0, pageData)
			// 切换到当前复制的新页
			this.commit('TOGGLE_PAGE', pageId)
			for(let index in pageData.comps){
				// debugger
				pageData.comps[index].id=Date.now().toString(10)+index
				// 将组件添加进页面
				this.commit('ADD_COMP_TO_PAGES', pageData.comps[index])
				// 将组件添加进组价容器
				this.commit('ADD_COMP', pageData.comps[index])
			}
			this.commit('ADD_PAGE', pageData)
		}
	},
	[types.REMOVE_PAGE](state, pageId) {
		const lists = state.lists
		const index = lists.findIndex((page) => page.id === pageId)
		if (index > -1) {
			lists.splice(index, 1)
			const nextActivePage = lists[index] || lists[index - 1]
			state.curPageId = nextActivePage['id']
		}
	},
	[types.EDIT_PAGE](state, {
		type,
		value,
		pageId
	}) {
		let page = state.lists.find((pg) => pg.id === pageId || pg.id === state.curPageId)
		if (page) {
			let pageProp = page[type]
			for (let key in value) {
				if (pageProp[key] === undefined) {
					continue
				}
				if (typeof value[key] === 'object') {
					Object.assign(pageProp[key], value[key])
				} else {
					pageProp[key] = value[key]
				}
			}
		}
	},
	[types.ADD_COMP_TO_PAGES](state, compData) {
		const curPage = state.lists.find((page) => page.id === state.curPageId)
		if (curPage) {
			curPage.comps.push(compData)
		}
	},

	// 删除页面中的dom
	[types.DEL_DOM_TO_PAGES](state, compId) {
		const curPage = state.lists.find((page) => page.id === state.curPageId)
		if (curPage) {
			var indexOf = -1;
			for (var i = 0; i < curPage.comps.length; i++) {
				if (curPage.comps[i].id == compId) {
					indexOf = i;
					break;
				}
			}
			// debugger
			if (indexOf != -1) {
				curPage.comps.splice(indexOf, 1)
			}
		}
	},

	// 添加模板页面
	[types.ADD_TEM_COMP_TO_PAGES](state, compData) {
		const curPage = state.lists.find((page) => page.id === compData.parentId)
		if (curPage) {
			curPage.comps.push(compData)
		}
	},
	[types.SET_PAGE_BGIMAGE](state, imgSrc) {
		const page = state.lists.find((page) => page.id === state.curPageId)
		if (page) {
			state.lists.find((page) => page.id === state.curPageId).css.bgi = imgSrc
		}
	},
	// 使用模板替换组件
	[types.REPLACE_COMP_TO_PAGE](state, compData) {
		const curPage = state.lists.find((page) => page.id === state.curPageId)
		if (curPage) {
			curPage.comps = []
			for (let item of compData) {
				curPage.comps.push(item)
			}
		}
	},
	// 添加撤销的内容
	[types.ADD_REVOKE_CONTENT](state, compData) {
		const curPage = state.lists.find((page) => page.id === state.curPageId)
		if (curPage) {
			curPage.revoke.push(compData)
		}
	},
	// 设置撤销或恢复操作的状态
	[types.REVOKE_STATE](state, val) {
		state.revoke_state = val
	},

	// 撤销操作
	[types.REVOKE](state) {
		const curPage = state.lists.find((page) => page.id === state.curPageId)
		if (curPage && curPage.revoke && curPage.revoke.length > 0) {
			// 获取需要撤销的值
			const revoke_comp_data = curPage.revoke[curPage.revoke.length - 1]

			// 查找当前页中的所有组件，是否存在需要撤销的值
			const comp_data = curPage.comps.find((comp) => comp.id === revoke_comp_data.id)

			if (comp_data) {
				var comp_index = -1
				// 如果存在则修改值
				for (let index in curPage.comps) {
					if (curPage.comps[index].id === revoke_comp_data.id) {
						comp_index = index
						break
					}
				}
				if (comp_index != -1) {
					// 将撤销过值添加进恢复的行列
					curPage.recovery.push(JSON.parse(JSON.stringify(comp_data)))
					Object.assign(curPage.comps.find((comp) => comp.id === revoke_comp_data.id), revoke_comp_data)
				}
			} else {
				// 不存在，则将改值添加进组件和页面中
				// 				commit('ADD_COMP_TO_PAGES', revoke_comp_data)
				// 				commit('ADD_COMP', revoke_comp_data)
			}
			curPage.revoke.pop()
		}
	},

	// 恢复操作
	[types.RECOVERY](state) {
		const curPage = state.lists.find((page) => page.id === state.curPageId)
		if (curPage && curPage.recovery && curPage.recovery.length > 0) {
			// 获取需要恢复的值
			const revokery_comp_data = curPage.recovery[curPage.recovery.length - 1]

			// 查找当前页中的所有组件，是否存在需要恢复的组件
			const comp_data = curPage.comps.find((comp) => comp.id === revokery_comp_data.id)
			if (comp_data) {
				var comp_index = -1
				// 如果存在则修改值
				for (let index in curPage.comps) {
					if (curPage.comps[index].id === revokery_comp_data.id) {
						comp_index = index
						break
					}
				}
				if (comp_index != -1) {
					// 将恢复的值添加进撤销的行列
					curPage.revoke.push(JSON.parse(JSON.stringify(comp_data)))
					Object.assign(curPage.comps.find((comp) => comp.id === revokery_comp_data.id), revokery_comp_data)
				}
			} else {

			}
			// 将恢复的行列中的最后一个值进行删除
			curPage.recovery.pop()
		}
	}
}

export default {
	state,
	getters,
	actions,
	mutations
}
